<template>
  <div>
    <div>
      <div class="title">NXT Module 保养可视化监控&登记</div>
    </div>
    <div class="line"></div>
    <el-row>
      <el-col :span="2">
        <div class="maintenanceCycle">
          <el-tabs v-model="formModel.mainteType" tab-position="left" type="card" style="height: 100vh">
            <!-- <el-tab-pane label="周保养" name="week"></el-tab-pane> -->
            <el-tab-pane label="月保养" name="month"></el-tab-pane>
            <el-tab-pane label="季保养" name="quarter"></el-tab-pane>
            <el-tab-pane label="年保养" name="year"></el-tab-pane>
          </el-tabs>
        </div>

      </el-col>
      <el-col :span="22">
        <div>
          <div v-for="line in lineModuleData" :key="`${line.line}-${line.machine}`" class="line-container">
            <div class="line-info">
              <h3 style="margin-right: 20px">{{ line.line }} - {{ line.machine }}</h3>
            </div>

            <!-- 机器模块显示 -->
            <div v-for="item in line.modules" :key="item.moduleSN" class="module-item">
              <img :src="getImageSrc(item.moduleType)" :alt="`Module ${item.moduleNo} - ${item.moduleSN}`"
                class="module-image" @click="e => handleImageClick(line.line, line.machine, item, e)" :class="{
                  'disabled-hover': hoverDisabled !== null && hoverDisabled !== item.moduleNo,
                  'module-clicked': activeMachine === `${line.line}-${line.machine}-${item.moduleNo}`
                }" />
              <div
                :class="['status-circle', item.mainteTypeStatus[formModel.mainteType].mainteComplete ? 'completed' : 'pending']">
              </div>

              <!-- 保养表单弹出框 -->
              <!-- <el-popover
                v-model="
                  popoverVisible[`${line.line}-${line.machine}-${item.moduleNo}`]
                "
                placement="top-start"
                title="新增保养"
                trigger="click"
                style="margin: unset;"
              >
                <el-form ref="formModel" :model="formModel" label-width="80px">
                  <el-form-item label="保养时间" prop="mainteDate">
                    <el-date-picker
                      v-model="formModel.mainteDate"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="请选择保养时间"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="保养员工" prop="mainteEmpNo">
                    <el-input
                      v-model="formModel.mainteEmpNo"
                      placeholder="请输入保养员工"
                      clearable
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="员工姓名" prop="mainteEmpName">
                    <el-input
                      v-model="formModel.mainteEmpName"
                      placeholder="请输入员工姓名"
                      clearable
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="备注信息" prop="mainteMark">
                    <el-input
                      v-model="formModel.mainteMark"
                      placeholder="请输入备注信息"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-form>
                <div style="text-align: right">
                  <el-button
                    @click="handleCancel(line.line, line.machine, item.moduleNo)"
                    >取消</el-button
                  >
                  <el-button type="primary" @click="handleSubmit">确定</el-button>
                </div>
              </el-popover> -->
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- <el-popover v-model="popoverVisible" placement="top-start" title="新增保养" trigger="click"
      :style="{ top: popoverTop, left: popoverLeft, position: 'fixed' }">
      <el-form ref="formModel" :model="formModel" label-width="80px">
        <el-form-item label="保养时间" prop="mainteDate">
          <el-date-picker v-model="formModel.mainteDate" value-format="yyyy-MM-dd" type="date"
            placeholder="请选择保养时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="保养员工" prop="mainteEmpNo">
          <el-input v-model="formModel.mainteEmpNo" placeholder="请输入保养员工" clearable></el-input>
        </el-form-item>
        <el-form-item label="员工姓名" prop="mainteEmpName">
          <el-input v-model="formModel.mainteEmpName" placeholder="请输入员工姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="备注信息" prop="mainteMark">
          <el-input v-model="formModel.mainteMark" placeholder="请输入备注信息" clearable></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button @click="handleCancel()">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-popover> -->
    <el-dialog :visible.sync="popoverVisible" :title=dialogTitle :width="'50%'" :before-close="handleCancel">
      <el-form ref="formModel" :model="formModel" label-width="80px" :rules="rules">
        <el-form-item label="保养时间" prop="mainteDate">
          <el-date-picker v-model="formModel.mainteDate" value-format="yyyy-MM-dd" type="date"
            placeholder="请选择保养时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="保养员工" prop="mainteEmpNo">
          <el-input v-model="formModel.mainteEmpNo" placeholder="请输入保养员工" clearable></el-input>
        </el-form-item>
        <el-form-item label="员工姓名" prop="mainteEmpName">
          <el-input v-model="formModel.mainteEmpName" placeholder="请输入员工姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="备注信息" prop="mainteMark">
          <el-input v-model="formModel.mainteMark" placeholder="请输入备注信息" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel()">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getModuleInfoStruct, AddMaintainRecord } from '@/network/moduleMaintain'
export default {
  data() {
    return {
      popoverTop: 0,
      popoverLeft: 0,
      lineModuleData: [],
      popoverVisible: false,
      machineTitle: '',
      hoverDisabled: null,
      activeMachine: null, // 当前激活的机器
      activeModuleItem: null, // 当前激活的机器
      formModel: {
        mainteDate: "",
        mainteEmpNo: "",
        mainteEmpName: "",
        mainteMark: "",
        mainteType: "month",
        moduleSN: ''
      },
      rules: {
        mainteDate: [{ required: true, message: "请选择保养时间", trigger: "blur" }],
        mainteEmpNo: [{ required: true, message: "请输入员工编号", trigger: "blur" }],
      },
    }
  },
  mounted() {
    this.getLineModuleData();
  },
  computed: {
    dialogTitle() {
      return this.machineTitle ? `新增保养 ${this.machineTitle}` : "新增保养";
    }
  },
  methods: {
    async getLineModuleData() {
      try {
        let page = 1;
        let limit = 50;
        let count = 0;
        do {
          const res = await getModuleInfoStruct({ page, limit })
          this.lineModuleData.push(...res.data);
          console.log(res);

          count = res.count;
        } while (page * limit < count);

      } catch (error) {
        console.log(error);
      }

      // 定时
      setTimeout(() => {
        this.getLineModuleData();
      }, 60 * 60 * 1000);
    },
    getImageSrc(moduleType) {
      if (moduleType === "M3") {
        return require("@/assets/M3 M6/M3.png");
      } else if (moduleType === "M6") {
        return require("@/assets/M3 M6/M6.png");
      }
      return "";
    },
    handleImageClick(line, machine, moduleItem, e) {
      this.formModel = {
        mainteDate: "",
        mainteEmpNo: "",
        mainteEmpName: "",
        mainteMark: "",
        mainteType: this.formModel.mainteType,
        moduleSN: ''
      }
      const moduleNo = moduleItem.moduleNo;
      const moduleSN = moduleItem.moduleSN
      const key = `${line}-${machine}-${moduleNo}`;
      this.machineTitle = `${line}-${machine}-${moduleSN}`
      if (this.activeMachine && this.activeMachine !== key) {
        return;
      }

      //   this.$set(this.popoverVisible, key, !this.popoverVisible[key]);
      //   this.activeMachine = this.popoverVisible[key] ? key : null;
      //   this.hoverDisabled = this.popoverVisible[key] ? moduleNo : null;

      this.popoverVisible = !this.popoverVisible;
      if (this.popoverVisible) {
        this.activeMachine = key;
        this.activeModuleItem = moduleItem;
        this.hoverDisabled = moduleNo;


        // const rect = e.target.getBoundingClientRect();
        // this.popoverLeft = (rect.left - 130) + 'px';
        // let top = (rect.top + e.target.offsetHeight);
        // // if ((top + 310) > window.innerHeight) {
        // //   top = rect.top - 340;
        // // }
        // this.popoverTop = top + 'px';

        this.formModel.moduleSN = moduleSN;
      }
      else {
        this.activeMachine = null;
        this.activeModuleItem = null;
        this.hoverDisabled = null;
      }
    },
    handleCancel(line, machine, moduleNo) {
      //   const key = `${line}-${machine}-${moduleNo}`;
      //   this.$set(this.popoverVisible, key, false);
      this.popoverVisible = false;

      this.activeMachine = null; // 取消时重置激活的机器
      this.activeModuleItem = null; // 取消时重置激活的机器
      this.hoverDisabled = null;
    },
    handleSubmit() {
      this.$refs['formModel'].validate(async (v) => {
        if (v) {
          try {
            const res = await AddMaintainRecord(this.formModel)
            if (!res.data) {
              // 不存在Module维护
              return;
            }
            this.$message({ message: '新增成功', type: 'success' });

            this.activeModuleItem.mainteTypeStatus[this.formModel.mainteType].mainteComplete = true;

            // ?
            // this.$forceUpdate();

            this.handleCancel()
          }
          finally {

          }
        }
      });
    },
  },
};
</script>

<style scoped>
.line-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-bottom: 10px;
  align-items: center;
  width: 100%;
  margin-left: 95px;
}

.line-info {
  margin-right: 20px;
}

.module-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.module-image {
  height: 100px;
  margin: 0;
  transition: all 0.3s;
  user-select: none;
}

.module-image:hover,
.module-image.module-clicked {
  opacity: 0.7;
  cursor: pointer;
  transform: scale(1.11);
}

.module-image.disabled-hover {
  pointer-events: none;
  opacity: 1;
}

.status-circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-top: 8px;
}

.status-circle.completed {
  background-color: rgb(51, 181, 51);
}

.status-circle.pending {
  background-color: rgb(201, 40, 40);
}

.maintenanceCycle {
  position: fixed;
  top: 20;
  /* z-index: 1; */
}

.title {
  font-size: 24px;
  margin-left: 100px;
  margin-bottom: 8px;
  /* font-weight: bold; */
  /* font-family: 思源宋体 SemiBold; */
}

.line {
  background: linear-gradient(to left, #ffffff, #637ca0, #ffffff);
  height: 3px;
  margin-bottom: 8px;
}
</style>
